<template>
    <div class="property">
        <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
        <div class="numberprop">
            <NumberProp :modelValue="numberRef" :readonly="readonly" @update:modelValue="update" :name="property.name" :defaultValue="defaultValue">
            </NumberProp>
        </div>
    </div>
</template>
<script setup lang="ts">
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';

import { onBeforeUnmount, ref } from "vue";
import NumberProp from '../commons/NumberProp.vue';
import { PropertyCompCallbackFuncParamsType } from "./base";

const props = withDefaults(defineProps<{
    property: any
}>(), {
})
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();

const { property } = props
const readonly = property.readonly
const disposer = createVueDisposer(onBeforeUnmount)
const numberRef = readonly ? toReadonlyVueRef<number | undefined>(disposer, property.reactVar, s => s) : toVR<number | undefined>(disposer, property.reactVar, s => s)
const defaultValue: any = property.defaultValue
const update = (a: number) => {
    numberRef.value = a
}
</script>
<style scoped>
.property {
    width: 100%;
    display: flex;
}

.item_name {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
    font-size: 14px;
    line-height: 26px;
}

.numberprop {
    flex: 1;
}

/* .readonly_true {
    cursor: not-allowed;
    cursor: no-drop;
} */
.input_number::-webkit-outer-spin-button,
.input_number::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input_number[type="number"] {
    -moz-appearance: textfield;
}
</style>
